<template>
	<view class="content">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="time font28">
					{{item.time}}
				</view>
				<view class="info">
					<view class="image">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
					<view class="information">
						<view class="left font28 fontw">
							<view class="type">
								{{item.type}}
							</view>
							<view class="ding">
								{{item.duration}}分钟
							</view>
						</view>
						<view class="left font20">
							<view class="range">
								{{item.range}}
							</view>
							<view class="duration">
								到店使用
							</view>
						</view>
						<view class="tips font20">
							提前预约 过期自动退
						</view>
						<view class="price font34 fontw">
							<text class="font22">￥</text>{{item.price}}
						</view>
					</view>
					<view class="ewm">
						<image :src="item.ewm" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					time: '2024-09-05 11:00:00 - 2024-09-06 11:00:00',
					image: '/static/logo.png',
					ewm: '/static/logo.png',
					type: '泰式spa',
					range: '周一到周日',
					duration: '120',
					price: '0.01'
				}, {
					time: '2024-09-05 11:00:00 - 2024-09-06 11:00:00',
					image: '/static/logo.png',
					ewm: '/static/logo.png',
					type: '泰式spa',
					range: '周一到周日',
					duration: '120',
					price: '0.01'
				}, {
					time: '2024-09-05 11:00:00 - 2024-09-06 11:00:00',
					image: '/static/logo.png',
					ewm: '/static/logo.png',
					type: '泰式spa',
					range: '周一到周五',
					duration: '120',
					price: '0.01'
				}, {
					time: '2024-09-05 11:00:00 - 2024-09-06 11:00:00',
					image: '/static/logo.png',
					ewm: '/static/logo.png',
					type: '泰式spa',
					range: '周一到周日',
					duration: '120',
					price: '0.01'
				}, {
					time: '2024-09-05 11:00:00 - 2024-09-06 11:00:00',
					image: '/static/logo.png',
					ewm: '/static/logo.png',
					type: '泰式spa',
					range: '周一到周日',
					duration: '120',
					price: '0.01'
				}, {
					time: '2024-09-05 11:00:00 - 2024-09-06 11:00:00',
					image: '/static/logo.png',
					ewm: '/static/logo.png',
					type: '泰式spa',
					range: '周一到周五',
					duration: '120',
					price: '0.01'
				}]
			};
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 23rpx 37rpx;

		.list {
			.item {
				margin-bottom: 23rpx;

				.time {
					padding: 32rpx 22rpx;
					background-color: #fff;
					text-align: center;
				}

				.info {
					padding: 31rpx 22rpx 39rpx 18rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.image {
						width: 169rpx;
						height: 169rpx;
						border-radius: 21rpx;
						overflow: hidden;
						margin-right: 18rpx;

						image {
							width: 169rpx;
							height: 169rpx;
						}
					}

					.information {
						flex: 1;

						.left {
							margin-bottom: 11rpx;

							.type {
								margin-right: 8rpx;
							}

							.duration {}

							.range {
								margin-right: 8rpx;
							}

							.ding {}
						}

						.tips {
							margin-bottom: 19rpx;
						}

						.price {
							color: #FF4A00;
						}
					}

					.ewm {
						width: 158rpx;
						height: 158rpx;
						border-radius: 21rpx;
						overflow: hidden;
						margin-left: 18rpx;

						image {
							width: 158rpx;
							height: 158rpx;
						}
					}
				}
			}
		}
	}
</style>